<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Panel - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
    <body>
        <div class="header">
            <h1 id="branding">ESUI - Panel</h1>
        </div>
        <div class="ui-g main-container">
            <div id="side-bar" class="ui-u-1-5">
                <ul id="navigator" class="ui-nav">
                </ul>
            </div>
            <div id="main" class="ui-u-4-5">
                <h2>Panel</h2>
                <div class="intro">
                    <p>骨架</p>
                </div>
                <div class="example ui-demo-light-stage">
                    <div class="row" data-ui-type="Panel" data-ui-id="panel">
                        <div class="ui-panel-header">Panel heading title</div>
                        <div class="ui-panel-body">
                            Panel content
                            <a data-ui-id="lnkTestChild" href="#" data-ui-type="Link">Child link control</a>
                        </div>
                    </div>
                    <p>
                        <button data-ui-id="btnSetContent" data-ui-type="Button" type="button">set Content</button>
                        <button data-ui-id="btnHide" data-ui-type="Button" type="button">Hide</button>
                        <button data-ui-id="btnShow" data-ui-type="Button" type="button">Show</button>
                    </p>
                    <p>
                        <esui-text-box data-ui="id:content;mode:textarea;height:100;"></esui-text-box>
                    </p>
                    <p>
                        <esui-button data-ui-id="btnPrepend">Prepend</esui-button>
                        <esui-button data-ui-id="btnAppend">Append</esui-button>
                    </p>
                </div>
                <h2>自定义Panel样式</h2>
                <div class="intro">
                    <p>自定义样式</p>
                </div>
                <div class="example ui-demo-light-stage">
                    <div class="row"  data-ui-type="Panel" data-ui-id="panel2" data-ui-variants="custom">
                        <div class="ui-panel-body">
                            Body content
                            <a href="#" data-ui-type="Link">Child link control</a>
                        </div>
                    </div>
                    <div class="row" data-ui-type="Panel" data-ui-variants="custom">
                        <div class="ui-panel-header">
                            <div class="ui-panel-left">
                                Panel heading title
                            </div>
                            <div class="ui-panel-right">
                                <span class="ui-icon-search ui-hover-fade-in"></span>
                                <span class="ui-icon-close ui-hover-fade-in"></span>
                            </div>
                        </div>
                        <div class="ui-panel-body">
                            Panel content
                            <a data-ui-id="lnkTestChild" href="#" data-ui-type="Link">Child link control</a>
                        </div>
                        <div class="ui-panel-footer">
                            Panel Footer
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="assets/loader/esl.js"></script>
        <script src="config.js"></script>
        <script src="demo.js"></script>
        <script src="assets/google-code-prettify/prettify.js"></script>
        <script id="main-js">
        require(
            [
                'esui',
                'esui/Panel',
                'esui/Link',
                'esui/Button',
                'esui/TextBox'
            ],
            function (ui) {
                ui.init();
                var p = ui.get('panel');
                ui.get('btnSetContent').onclick = function () {
                    p.setContent('Date:' + new Date());
                };
                ui.get('btnHide').onclick = function () {
                    p.hide();
                };
                ui.get('btnShow').onclick = function () {
                    p.show();
                };
                var c = ui.get('content');
                ui.get('btnPrepend').onclick = function () {
                    p.prependContent(c.getValue());
                };
                ui.get('btnAppend').onclick = function () {
                    p.appendContent(c.getValue());
                };
            }
        );
        </script>
        <script src="sitemap.js"></script>
    </body>
</html>
